<!DOCTYPE html>
<html class="x-admin-sm">
    <head>
        <meta charset="UTF-8">
        <title>欢迎页面-X-admin2.2</title>
        <meta name="renderer" content="webkit">
        <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
        <meta name="viewport" content="width=device-width,user-scalable=yes, minimum-scale=0.4, initial-scale=0.8,target-densitydpi=low-dpi" />
        <link rel="stylesheet" href="./css/font.css">
        <link rel="stylesheet" href="./css/xadmin.css">
		<link rel="stylesheet" href="css/tooltip.css" />
		<link rel="stylesheet" href="js/Cesium/Widgets/widgets.css" />
        <script src="./lib/layui/layui.js" charset="utf-8"></script>
        <script type="text/javascript" src="./js/xadmin.js"></script>
		<script src="js/Cesium/Cesium.js"></script>
		<script src="js/Cesiumtool/viewerCesiumNavigationMixin.js"></script>
		<script src="js/Cesiumtool/GlobeTooltip.js"></script>
        <!-- 让IE8/9支持媒体查询，从而兼容栅格 -->
        <!--[if lt IE 9]>
          <script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
          <script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
        <![endif]-->
		<style>
			html,body{
				margin: 0;
				padding: 0;
				height: 100%;
				width: 100%;
			}
			#contanter{
				width:100%;
				height:100%
			}    
			/* 去除logo信息 */	
			.cesium-widget-credits{ 
				display:none!important; 
				visibility:hide!important; 
			} 
			/* 导航条的位置 */
			.compass{
				left:0px;
				top:20px
			}
			.navigation-controls{
				left:30px;
				top:110px
			}
			
			/* 添加点、线、面的按钮*/
			.addEntities{
				position: fixed;
				left: 110px;
				top: 10px;
				z-index: 99999;
			}
			.addEntities button{
				background-color: rgba(47,53,60,0.8);
				color: #FFFFFF;
				border: 0;
				padding: 5px 15px;
				border-radius: 5px;
			}
		</style>
    </head>
    <body>
		<div id="contanter"></div>
		<!-- 添加实体 -->
		<div class="addEntities">
			<button onclick="change(0)">x+</button>
			<button onclick="change(1)">x-</button>
			<button onclick="change(2)">y+</button>
			<button onclick="change(3)">y-</button>
			<button onclick="change(4)">z+</button>
			<button onclick="change(5)">z-</button>
		</div>
		<script>
			var viewer = new Cesium.Viewer("contanter",{
				animation: false,  //是否显示动画控件
	            baseLayerPicker: false, //是否显示图层选择控件
	            geocoder: true, //是否显示地名查找控件
	            timeline: false, //是否显示时间线控件
	            sceneModePicker: true, //是否显示投影方式控件
	            navigationHelpButton: false, //是否显示帮助信息控件
	            infoBox: true,  //是否显示点击要素之后显示的信息
				// 加载地形数据
				// terrainProvider: new Cesium.CesiumTerrainProvider({
				// 	url: Cesium.IonResource.fromAssetId(3956)
				// })
            })
			
			viewer.scene.globe.depthTestAgainstTerrain = true;

			// Set the initial camera view to look at Manhattan
			// var initialPosition = Cesium.Cartesian3.fromDegrees(-74.01881302800248, 40.69114333714821, 753);
			// var initialOrientation = new Cesium.HeadingPitchRoll.fromDegrees(21.27879878293835, -21.34390550872461, 0.0716951918898415);
			// viewer.scene.camera.setView({
			// 	destination: initialPosition,
			// 	orientation: initialOrientation,
			// 	endTransform: Cesium.Matrix4.IDENTITY
			// });

            
            const tileset = new Cesium.Cesium3DTileset({ url: './data/SampleData/倾斜/tileset.json' });
			// const tileset = new Cesium.Cesium3DTileset({ url: Cesium.IonResource.fromAssetId(3839) })
            var heightStyle = new Cesium.Cesium3DTileStyle({
				color : {
					conditions : [
						["${height} >= 300", "rgba(45, 0, 75, 0.5)"],
						["${height} >= 200", "rgb(102, 71, 151)"],
						["${height} >= 100", "rgb(170, 162, 204)"],
						["${height} >= 50", "rgb(224, 226, 238)"],
						["${height} >= 25", "rgb(252, 230, 200)"],
						["${height} >= 10", "rgb(248, 176, 87)"],
						["${height} >= 5", "rgb(198, 106, 11)"],
						["true", "rgb(127, 59, 8)"]
					]
				}
			});
			// 设置样式
			// tileset.style = heightStyle
						
			// viewer.scene.primitives.add(tileset);
   //          var heightOffset = -32;
			// tileset.readyPromise.then(function(tileset) {
			// 	// Position tileset
			// 	var boundingSphere = tileset.boundingSphere;
			// 	var cartographic = Cesium.Cartographic.fromCartesian(boundingSphere.center);
			// 	var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, 0.0);
			// 	var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, heightOffset);
			// 	var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
			// 	tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
			// });
			
     
	    tileset.readyPromise.then(function(tileset) {
	         viewer.scene.primitives.add(tileset);
	         viewer.zoomTo(tileset, new Cesium.HeadingPitchRange(0.5, -0.2, tileset.boundingSphere.radius * 1.0));
	        // 调整3dtile的位置
			 // changeHeight(10);
	         // 创建平移矩阵方法二
	         var translation=Cesium.Cartesian3.fromArray([61, -83 ,60]);
	         m= Cesium.Matrix4.fromTranslation(translation);
	         
	         //生效
	         tileset._modelMatrix = m;
	     }).otherwise(function(error) {
	         console.log(error);
	     });
		 var step = 1
		 var x=0;
		 var y=0;
		 var z=0
		 function change(type) {
				switch (type) {
					case 0:
						x += step;
						break;
					case 1:
						x -= step;
						break;
					case 2:
						y += step;
						break;
					case 3:
						y -= step;
						break;
					case 4:
						z += step;
						break;
					case 5:
						z -= step;
						break;
				}
                console.log(x,y,z)
				//创建平移矩阵方法二
				var translation=Cesium.Cartesian3.fromArray([x, y, z]);
				var m= Cesium.Matrix4.fromTranslation(translation);
				tileset.modelMatrix = m;
			}
		 // 调整高度
		 function changeHeight(height) {
			height = Number(height);
			if (isNaN(height)) {
			return;
			}
			var cartographic = Cesium.Cartographic.fromCartesian(tileset.boundingSphere.center);
			var surface = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude, cartographic.height);
			var offset = Cesium.Cartesian3.fromRadians(cartographic.longitude, cartographic.latitude,height);
			var translation = Cesium.Cartesian3.subtract(offset, surface, new Cesium.Cartesian3());
			tileset.modelMatrix = Cesium.Matrix4.fromTranslation(translation);
		}
    
     
		  
		</script>
    </body>
</html>
